<template>
  <div>
    <!-- rk表单 -->
    <div>
      <el-row>
        新增入库表单
      </el-row><br>
      <el-form :inline="true" label-position="left" label-width="80px" :model="form">
        <el-row>
          <el-col :span="7">
            <el-form-item label="入库编号">
              <el-input v-model="rowData.rkNo" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        
        
          <el-col :span="7" :offset="1">
            <el-form-item label="商品编号">
              <el-input v-model="rowData.goodsid" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        
          <el-col :span="7" :offset="1">
            <el-form-item label="仓库">
              <el-input v-model="rowData.repositoryNo" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="区域">
              <el-input v-model="rowData.location" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="提单人">
              <el-input  v-model="rowData.makePerson" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="成色">
              <el-input v-model="rowData.percenttage" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="入库方式">
              <el-input v-model="rowData.type" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="条码">
              <el-input v-model="rowData.barCode" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="加工费">
              <el-input v-model="rowData.processingFee" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="重量">
              <el-input v-model="rowData.weight" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="数量">
              <el-input v-model="rowData.nums" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="6">&nbsp;</el-col>
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-s-order" @click="add_rk_table" :loading="submitFlag">提交</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-d-arrow-left" @click="cancel_table">驳回</el-button>
          </el-col>
          
        </el-row>
        
      </el-form>
    </div>

    <div>
      <!-- 表格 -->
      <el-row>
        产品信息
      </el-row><br>
      <el-table
        :key="refreshKey"
        :data="tableData" 
        ref="singleTable"
        header-align
        highlight-current-row
        @current-change="handleCurrentChangeA"
        @row-click="rowClick"
        :row-class-name="rowClassName"
        style="width: 100%">
        <el-table-column
          header-align="center"
          align="center"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="rkNo"
          label="入库编号"
          width="180">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="custom"
          label="客户"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="category"
          label="商品种类"
          :formatter="categoryFormatter"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="rkType"
          label="入库来源"
          :formatter="rkTypeFormatter"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="status"
          label="状态"
          :formatter="statusFormatter"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="name"
          label="产品名字"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="repositoryNo"
          label="仓库"
          width="160">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="weight"
          label="重量"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="nums"
          label="数量"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="makePerson"
          label="提单人"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="verfyPerson"
          label="审核人"
          width="120">
        </el-table-column>
        
      </el-table>
      <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30]"
      :page-size="sizeEveryPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      done:0,
      refreshKey:0,
      rowData:[],
      sizeEveryPage:10,
      submitFlag:false,
      pageNum:1,
      total:null,
      index:"",
      form: {
        goodsid:'',
        repositoryNo:'',
        location:'',
        status:2,
        percenttage:'',
        type:'',
        barCode:'',
        weight:'',
        nums:'',
        processingFee:'',
        No:''  
      },
      tableData: []
    };
  },
  methods:{
    add_rk_table(){
      if(this.rowData.status == 3){
        this.$message.error("该表已经入库过了~");
        return;
      }
      if(this.rowData.status == 4){
        this.$message.error("该表已经失效了~");
        return;
      }
      this.$confirm('确定提交吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.submitFlag = true;
          //提交入库单
          this.axios({
            method:'put',
            url:this.baseUrl+'repository/addToRepository',
            data:JSON.stringify(this.rowData),
            headers:{
              "Content-Type": "application/json; charset=UTF-8"
            }
          }).then(res=>{
            if(res.data.status == 'SYSTEM_BUSY'){
              this.$message.error(res.data.message);
            }
            if(res.data.status == 'SUCCESS'){
              this.$message({
                message:res.data.message,
                type:'success'
              });
              this.rowData.status = '3';
              this.tableData[this.index].status = '3';
            }
            this.refreshKey++;
            this.done++;
            this.submitFlag = false;
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
 
    },
    cancel_table(){
      //驳回表单
      if(this.rowData.status == '3'){
        this.$message.error("你不能驳回已经完成的表单~");
        return;
      }
      if(this.rowData.status == '4'){
        this.$message.error("此单已经失效了，不能再驳回~");
        return;
      }
      this.$confirm('确定提交吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios({
        method:'post',
        url:this.baseUrl+'rkTable/fail',
        data:JSON.stringify(this.rowData),
        headers:{
          "Content-Type": "application/json; charset=UTF-8"
        }
      }).then(res=>{
        if(res.data.status == 'ResultEnum.SYSTEM_BUSY'){
          this.$message.error(res.data.message);
        }else{
          this.rowData = res.data.data;
          this.tableData[this.index] = this.rowData;
          this.$message({
            message:"成功驳回~",
            type:'success'
          });
          this.refreshKey++;//重新渲染数据
          this.done++;
        }
      })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
      
    },

    rowClick(row){
      this.rowData = this.tableData[row.index];
      this.index = row.index;
      //
      // this.form.goodsid = this.rowData.goodsid;
      // this.form.repositoryNo = this.rowData.repositoryNo;
      // this.form.location = this.rowData.location;
      // this.form.status = this.rowData.status;
      // this.form.percenttage = this.rowData.percenttage;
      // this.form.type = this.rowData.type;
      // this.form.barCode = this.rowData.barCode;
      // this.form.weight = this.rowData.weight;
      // this.form.nums = this.rowData.nums;
      // this.form.processingFee = this.rowData.processingFee;
      // this.form.rkNo = this.rowData.rkNo;
    },

        //将行索引放进row
    rowClassName({row,rowIndex}){
      row.index = rowIndex;
    },
    handleCurrentChangeA(val) {
        this.rowData = val;
    },


        //分页
    //按每页显示条数查
    handleSizeChange(val) {
      this.sizeEveryPage = val;
      //console.log(this.sizeEveryPage);
      this.selectByPage();
    },
    //按页码查
    handleCurrentChange(val) {
      //console.log(val);
      this.pageNum = val;
      //console.log(this.pageNum);
      this.selectByPage();
    },
    //分页查询方法
    selectByPage(){
      let i = (this.total-this.done)/this.sizeEveryPage;
      //console.log(this.pageNum+'---'+i);
      if(i != this.pageNum){
        this.pageNum--;
      }
      this.axios({
        method:"get",
        url:this.baseUrl+"rkTable/findStatusGoing",
        params:{
          page:this.pageNum,
          nums:this.sizeEveryPage
        }
      }).then(res=>{
        //this.dataFormat(res.data.data.list);
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    //转换信息的显示
    statusFormatter(val){
      //console.log(val.status);
      if(val.status == '1'){
        return "未审核";
      }else if(val.status == '2'){
        return "进行中";
      }else if(val.status == '3'){
        return "成功";
      }else{
        return '失败';
      }
    },
    categoryFormatter(val){
      if(val.category == '1'){
        return "黄金";
      }else if(val.category == '2'){
        return "铂金";
      }else if(val.category == '3'){
        return "钻石";
      }else if(val.category == '4'){
        return "宝玉";
      }
    },
    rkTypeFormatter(val){
      if(val.rkType == '1'){
        return '采购入库';
      }else if(val.rkType == '2'){
        return '销售退货';
      }else if(val.rkType == '3'){
        return "调拨入库";
      }
    },

  },
  created(){
    this.axios({
      method:'get',
      url:this.baseUrl+'rkTable/findStatusGoing',
      params:{
        page:this.pageNum,
        nums:this.sizeEveryPage
      }
    }).then(res=>{
      console.log(res.data.data.list);
      this.tableData = res.data.data.list;
      this.total = res.data.data.total;
      this.rowData = this.tableData[0];
      //console.log(this.pageNum);
    })
  }
}
</script>

<style scoped>

</style>